<template>
	<view>
		<view class="d-flex j-sb a-center">
			<view class="font-lg font-weight">箱格信息</view>
		</view>
		<uni-table  style="height: 288rpx" class="mt-1" ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr class="position-sticky bg-white" >
				<uni-th width="120"><text class="font-md">箱格</text></uni-th>
				<uni-th>
					<view class="d-flex">
						<text style="width:336rpx;" class="font-md">物品名称</text>
						<text style="width: 100rpx;" class="font-md">物品分类</text>
						<text style="width: 40rpx;" class="font-md">物品数量</text>
					</view>
				</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>
					<text class="font-md">{{ item.code }}箱格</text>
				</uni-td>
				<uni-td>
					
					
					<view>
						<view v-for="val in item.goods" :key="val.id" class="d-flex " style="padding: 10px 0;">
							<text style="width:336rpx;" class="font-md">{{val.name}}</text>
							<text style="width: 100rpx;" class="font-md">{{val.categoryStrand}}</text>
							<text style="width: 40rpx;" class="font-md">{{val.num}}</text>
						</view>
					</view>
				
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from '@/store/index.js';
const store = useStore();
const tableData = ref([]);





const reload = ()=>{
	const boxNum = store.deviceStore.data.number
	
	for(let i=1;i<=boxNum;i++){
		
		let goods = store.goodsStore.list.filter(item => item.boxId == i)
		
		if(goods.length > 0){
			goods.map(item => {
				item.categoryStrand = store.categoryStore.getNameStrand(item.cid)
			})
		}

		tableData.value.push({
			id: i,
			code: i < 10 ? '0' + i : i,
			goods
		})
	}
	
	
}

onLoad(()=>{
	reload()
})
</script>

<style lang="scss">
	.button {
		width: 60rpx;
		height: 20rpx;
	}
	.model-shell {
		width: 200rpx;
		height: 120rpx;
		border-radius: 6rpx;
		.form-label {
			text-align: right;
			width: 50rpx;
		}
	}
</style>
